/* 翻页图标上下移动 */
.page-moveIconUp{
	animation:moveIconDown 1s ease alternate infinite;
	-webkit-animation:moveIconDown 1s ease  infinite;
}
@keyframes moveIconDown {
	0% { bottom:2%;opacity: 1; }
	100% { bottom:5% ;opacity: 0;}
}
@-webkit-keyframes moveIconDown {
	0% { bottom:2%;opacity: 1; }
	100% { bottom:5% ;opacity: 0;}
}
/*水*/
@keyframes water {
	from{
		top:45%;
		opacity: 1;
		transform: scaleY(0.9);
		-webkit-transform: scaleY(0.9);
	}
	70%{
		top:46%;
		opacity: 0.7;
		transform: scaleY(1.2);
		-webkit-transform: scaleY(1.2);
	}
	to{
		top:44.5%;
		opacity: 0;
		transform: scaleY(1);
		-webkit-transform: scaleY(1);
	}
}
@-webkit-keyframes water {
	from{
		top:45%;
		opacity: 1;
		transform: scaleY(0.9);
		-webkit-transform: scaleY(0.9);
	}
	70%{
		top:46%;
		opacity: 0.7;
		transform: scaleY(1.2);
		-webkit-transform: scaleY(1.2);
	}
	to{
		top:44.5%;
		opacity: 0;
		transform: scaleY(1);
		-webkit-transform: scaleY(1);
	}
}
/*头发*/
@keyframes hair {
	0%{transform: rotateZ(14deg);-webkit-transform: rotateZ(14deg);}
	100%{transform: rotateZ(10deg);-webkit-transform: rotateZ(10deg);}
}
@-webkit-keyframes hair {
	0%{transform: rotateZ(14deg);-webkit-transform: rotateZ(14deg);}
	100%{transform: rotateZ(10deg);-webkit-transform: rotateZ(10deg);}
}
/*第一页*/
@keyframes toup {
	0%{
		transform: translateY(30px);
		-webkit-transform: translateY(30px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		opacity:1;
	}
}
@-webkit-keyframes toup {
	0%{
		transform: translateY(30px);
		-webkit-transform: translateY(30px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		opacity:1;
	}
}
/*第二页*/
@keyframes toleft {
	0%{
		transform: translateX(30px);
		-webkit-transform: translateX(30px);
		opacity: 0;
	}
	100%{
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		opacity:1;
	}
}
@-webkit-keyframes toleft {
	0%{
		transform: translateX(30px);
		-webkit-transform: translateX(30px);
		opacity: 0;
	}
	100%{
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		opacity:1;
	}
}
/*第三页*/
@keyframes toright {
	0%{
		transform: translateX(-30px);
		-webkit-transform: translateX(-30px);
		opacity: 0;
	}
	100%{
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		opacity:1;
	}
}
@-webkit-keyframes toright {
	0%{
		transform: translateX(-30px);
		-webkit-transform: translateX(-30px);
		opacity: 0;
	}
	100%{
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		opacity:1;
	}
}
/*向下*/
@keyframes tobottom {
	0%{
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		opacity: 1;
	}
}
@-webkit-keyframes tobottom {
	0%{
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		opacity: 1;
	}
}
/*眼睛*/
@keyframes eye {
	from{opacity:1;}
	to{opacity:0;}
}
@-webkit-keyframes eye {
	from{opacity:1;}
	to{opacity:0;}
}
/*手心*/
@keyframes scale1 {
	0%{
		transform: scale(0);
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes scale1 {
	0%{
		transform: scale(0);
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity:1;
	}
}
/*圆*/
@keyframes crice {
	0%{transform: scale(1);-webkit-transform: scale(1);opacity:1;}
	100%{transform: scale(2);-webkit-transform: scale(2);opacity:0;}
}
@-webkit-keyframes crice {
	0%{transform: scale(1);-webkit-transform: scale(1);opacity:1;}
	100%{transform: scale(2);-webkit-transform: scale(2);opacity:0;}
}
/*遮罩*/
@keyframes left {
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}
@-webkit-keyframes left{
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}
@keyframes right {
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}
@-webkit-keyframes right {
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}
/* 应用页面过渡动画 */
.section.page-moveToTop {
	-webkit-animation: moveToTop .6s ease both;
	animation: moveToTop .6s ease both;
	/*transform-origin: bottom center;*/
	/*-webkit-transform-origin: bottom center;*/
}

.section.page-moveToBottom {
	-webkit-animation: moveToBottom .6s ease both;
	animation: moveToBottom .6s ease both;
	/*transform-origin: top center;*/
	/*-webkit-transform-origin: top center;*/
}

/* 定义页面过度动画 */
@-webkit-keyframes moveToTop {
	from { top:0%;opacity: 1;
		/*transform: scale(1);-webkit-transform: scale(1);*/
	}
	to { top:-100%;opacity: 1;
		/*transform: scale(.5);-webkit-transform: scale(.5);*/
	}
}
@keyframes moveToTop {
	from { top:0%;opacity: 1;
		/*transform: scale(1);-webkit-transform: scale(1);*/
	}
	to { top:-100%;opacity: 1;
		/*transform: scale(.5);-webkit-transform: scale(.5);*/
	}
}

@-webkit-keyframes moveToBottom {
	from { top:0% ;opacity: 1;
		/*transform: scale(1);-webkit-transform: scale(1);*/
	}
	to { top:100% ;opacity: 1;
		/*transform: scale(.5);-webkit-transform: scale(.5);*/
	}
}
@keyframes moveToBottom {
	from { top:0% ;opacity: 1;
		/*transform: scale(1);-webkit-transform: scale(1);*/
	}
	to { top:100% ;opacity: 1;
		/*transform: scale(.5);-webkit-transform: scale(.5);*/
	}
}
